<template>
	<button
		:plain="true"
		:class="['inline-block link-button', extraClass || '']"
		hover-class="opacity-80"
		hover-start-time="0"
		hover-stay-time="50"
		:open-type="openType"
		@getphonenumber="getPhoneNumber"
		@click="click"
	>
		<text :class="['color-primary', textSizeClass, textClass || '']">
			<slot>{{ text }}</slot>
		</text>
	</button>
</template>

<script>
export default {
	props: {
		text: String,
		extraClass: String,
		textClass: String,
		textSizeClass: {
			default: 'text-n',
			type: String,
		},
		openType: {
			type: [String, null],
			default: null,
		},
	},
	setup(props, ctx) {
		function getPhoneNumber(e) {
			ctx.emit('touch', e);
		}
		function click(e) {
			if (props.openType) {
				return;
			}
			ctx.emit('touch', e);
		}
		return {
			getPhoneNumber,
			click,
		};
	},
};
</script>

<style>
.link-button {
	border: 0 !important;
	padding: 0 !important;
	line-height: inherit !important;
	font-size: 0 !important;
	text-align: inherit !important;
	border-radius: 0 !important;
}
.link-button:after {
	content: '';
	display: none;
}
</style>
